<template>
  <div class="hello">
    <h1>依赖注入, 实例选项: provide 和 inject</h1>
    <h1>{{ message }}</h1>
    <div>
      <button @click="fnCallRoot">访问元素 & 组件 - Vue根实例</button>
      <button @click="fnProvideInject">注入箭头函数，this -- 当前组件实例</button>
      <button @click="fnProvideFunction">注入普通函数，this -- 注入组件实例</button>
    </div>
    <h1>{{ markers }}</h1>
  </div>
</template>

<script>
export default {
  name: 'InnerWorld',
  inject: {
    markers: {
      default: ''
    },
    modifyMessage: {
      default: ''
    },
    callbackfn: {
      default: ''
    }
  },
  data () {
    return {
      message: 'String'
    }
  },
  mounted () {
  },
  methods: {
    fnCallRoot () {
      console.log(this.$root)
    },
    fnProvideInject () {
      if (this.modifyMessage) {
        this.modifyMessage('注入箭头函数')
      }
    },
    fnProvideFunction () {
      if (this.callbackfn) {
        this.callbackfn('注入普通函数')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
  margin 40px 0 0
</style>
